<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
             1、将所有的段落设置为红色

             元素选择器
               作用  根据标签名选择指定元素
               语法  标签名{}
               例子  p{}  h1{}  div{}

             2、将少小离家老大回1设置为红色
             id选择器
               作用  根据id选择指定元素
               语法  #id属性值{}
               例子  #box{}  #red{}  

             3、将少小离家老大回2设置为红色
                将少小离家老大回3设置为红色
             class/类选择器
             class是一个标签属性，它与id类似，不同的是，class可以重复使用,可以通过class为元素分组
               作用  根据元素的class属性来择一组元素
               语法  .class属性值
               例子  .blue{}
            注意:可以为一个标签指定多个class 多个class使用空格隔开

             4、选中页面中所有元素
             通配选择器
               语法  *属性值
               例子  *{}
            
              
         */


         #red {
             color: orange;
         }

         .blue{
             color: pink;
         }

         .abc{
             font-size: 22px;
         }

         *{
             color: blue;
         }

    </style>
</head>
<body>

    <h1>这是标题</h1>

    <p id="red">少小离家老大回1</p>
    <p class="blue abc">少小离家老大回2</p>
    <p class="blue">少小离家老大回3</p>
    <p>少小离家老大回4</p>
    <p>少小离家老大回5</p>
    <p>少小离家老大回6</p>
    <p>少小离家老大回7</p>
    
</body>
</html>